<template>
     <div class="layers3">
          <div
               class="layersItem"
               v-for="(item, index) in 5"
               :key="item"
               :style="getItemStyle(index)"
               :data-index="index"
          >
               <div class="itemLeft"></div>
               <div class="itemRight">4M隧道</div>
          </div>
     </div>
</template>

<script setup lang="ts">
// 计算每个项的位置样式
const getItemStyle = (index: number) => {
     switch (index) {
          case 0:
               return {
                    left: '5%',
                    top: '5%',
               }
          case 1:
               return {
                    left: '12%',
                    bottom: '16%',
               }
          case 2:
               return {
                    left: '45%',
                    bottom: '1%',
               }
          case 3:
               return {
                    left: '74%',
                    bottom: '12%',
               }
          case 4:
               return {
                    left: '85%',
                    top: '15%',
               }

          default:
               return {}
     }
}
</script>

<style scoped lang="scss">
// 定义动画变量
$item-animation-duration: 0.8s;
$item-animation-delay: 0.12s;

.layers3 {
     width: 100%;
     height: 100%;
     background: url('@/assets/images/largeScreen/layer3底座.png') no-repeat
          center center;
     background-size: 100% 100%;
     position: relative;
     // 优化的脉冲动画效果
     animation-delay: 2s;
     animation: pulseLayer3 5.5s ease-in-out infinite;
}

.layersItem {
     width: auto;
     height: auto;
     display: flex;
     align-items: center;
     position: absolute;
     font-size: 0.7vw; // 改为视口宽度的1%
     color: #f4f4f4;
     opacity: 0;
     transform: translateY(15px);
     // 为每个元素设置不同的动画延迟
     animation: fadeInUp $item-animation-duration ease-out forwards;
     transition: all 0.3s ease;
     cursor: pointer;

     // 根据索引设置不同的动画延迟
     &[data-index='0'] {
          animation-delay: $item-animation-delay * 1;
     }

     &[data-index='1'] {
          animation-delay: $item-animation-delay * 2;
     }

     &[data-index='2'] {
          animation-delay: $item-animation-delay * 3;
     }

     &[data-index='3'] {
          animation-delay: $item-animation-delay * 4;
     }

     &[data-index='4'] {
          animation-delay: $item-animation-delay * 5;
     }

     // 悬停效果
     &:hover {
          transform: translateY(-5px) !important;
          z-index: 10;
     }

     .itemLeft {
          // 改为相对单位，基于视口宽度
          width: 4vw;
          height: 4.7vw;
          // 文字竖型
          writing-mode: vertical-rl;
          display: flex;
          align-items: center;
          background: url('@/assets/images/largeScreen/layer3文字底座.png')
               no-repeat center center;
          background-size: 100% 100%;
          text-align: center;
          padding-top: 1vw; // 改为视口宽度的1.2%
          // 添加悬停效果
          transition: all 0.3s ease;

          &:hover {
               filter: brightness(1.2);
               transform: scale(1.05);
          }
     }

     .itemRight {
          color: #9ce4f1;
          background: url('@/assets/images/largeScreen/layer3文字背景.png')
               no-repeat center center;
          background-size: 100% 100%;
          width: 7vw;
          height: 2vw;
          line-height: 2vw;
          text-align: center;
          position: absolute;
          left: -85%;
          transform: translate(-50%, -50%);
          // 添加文字发光效果
          text-shadow: 0 0 4px rgba(156, 228, 241, 0.6);
          transition: all 0.3s ease;

          &:hover {
               text-shadow: 0 0 10px rgba(156, 228, 241, 0.9);
               transform: translate(-50%, -50%) scale(1.1);
          }
     }

     &:nth-child(4) {
          .itemRight {
               left: 190% !important;
          }
     }

     &:nth-child(5) {
          .itemRight {
               left: 190% !important;
          }
     }
}
// 定义淡入上移动画
@keyframes fadeInUp {
     from {
          opacity: 0;
          transform: translateY(15px);
     }
     to {
          opacity: 1;
          transform: translateY(0);
     }
}

// 定义缓慢旋转动画
@keyframes slowRotate {
     from {
          transform: rotate(0deg);
     }
     to {
          transform: rotate(360deg);
     }
}
// 优化的脉冲动画 - 层3
@keyframes pulseLayer3 {
     0% {
          transform: scale(1);
          opacity: 1;
     }

     20% {
          transform: scale(1.015);
          opacity: 0.98;
     }

     40% {
          transform: scale(1.03);
          opacity: 0.96;
     }

     60% {
          transform: scale(1.01);
          opacity: 0.97;
     }

     80% {
          transform: scale(1.02);
          opacity: 0.99;
     }

     100% {
          transform: scale(1);
          opacity: 1;
     }
}
</style>
